<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/meyer-reset/2.0/reset.min.css"
    />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/main.css" />
    <title>农家乐列表</title>
    <style>
      .temp {
        width: 100%;
        background: #ffffff;
      }

      body {
        background: #f5f5f5;
      }

      .option-list {
        padding: 0.6rem 3.5rem;
        background: #ffffff;
        border-bottom: 1px solid #cccccc81;
      }

      .comment-star img {
        width: 4vw;
      }
    </style>
  </head>

  <body>
    <!-- 农家乐列表 -->
    <div class="scenicArea">
      <div class="top">
        <div class="t-inputSearch">
          <img
            src="./img/searchIC.png"
            style="width: 0.78rem;height: 0.78rem;"
          />
          <input type="text" name="" id="" placeholder="请输入搜索关键词" />
        </div>
        <div class="t-textSearch"><span>搜索</span></div>
      </div>
      <div class="content">
        <div class="option-list">
          <div>
            <p class="option-list-p">全部</p>
          </div>
          <div>
            <p class="option-list-p">智能排序</p>
          </div>
          <div>
            <p class="option-list-p">筛选</p>
          </div>
        </div>
        <div class="A-c-list">
          <a href="./agritainmentListDesc.html">
            <div class="A-c-list-child">
              <div class="A-c-imgouter">
                <img
                  src="./img/agritainmentList-img.jpg"
                  style="width: 100%;"
                />
              </div>
              <div class="A-c-text">
                <div class="ACText-onerow">
                  <p class="AC-onerowTit">永川干锅</p>
                  <!-- <p class="AC-onerowF"><span class="AC-onerowNum">3.5</span>分</p> -->
                </div>
                <div class="ACText-tworow">
                  <div class="comment-star" id="star" data-num="3.5"></div>
                </div>
                <div class="ACText-fourrow">
                  121135464
                </div>
                <div class="ACText-threerow">
                  重庆 重庆市 彭水苗族土家族自治区
                </div>
                <div class="ACText-fourrow">
                  国本路30号大街
                </div>
              </div>
            </div>
          </a>
        </div>
      </div>
      <div class="bot">
        <nav class="bot-nav">
          <a href="./home.html">
            <div class="nav-child-div">
              <img src="./img/homeIC-active.png" />
              <span>主页</span>
            </div>
          </a>
          <a href="./localProduct.html">
            <div class="nav-child-div">
              <img src="./img/localProductIC.png" />
              <span>特产</span>
            </div>
          </a>
          <a href="./shop.html">
            <div class="nav-child-div">
              <img src="./img/shopIC.png" />
              <span>店铺</span>
            </div>
          </a>
          <a href="./star.html">
            <div class="nav-child-div">
              <img src="./img/star.png" />
              <span>扶贫</span>
            </div>
          </a>
        </nav>
      </div>
    </div>
    <script src="./js/ft.js"></script>
    <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/raty/2.8.0/jquery.raty.min.js"></script>
    <script>
      $("#star").raty({
        //   星星分数
        score: function() {
          return $(this).attr("data-num");
        },
        starOn: "./img/star-on.png",
        starOff: "./img/star-off.png",
        starHalf: "./img/star-half.png",
        readOnly: false,
        halfShow: true,
        size: 2
      });
    </script>
  </body>
</html>
